<template>
  <view class="address-management-page">

    <view class="address-list-wrap">
      <view
        v-for="(item) in addressList"
        :key="item.id"
        class="address-item"
      >
        <view class="item-wrap" @click="handleSelectAddress(item)">
          <view class="person-wrap">
            <view class="name">{{ item.name }}</view>
            <view class="phone">{{ item.mobile }}</view>
          </view>

          <view class="address-wrap">{{ item.province + item.city + item.district + item.name_address + item.door_number }}</view>

          <view class="option-wrap">
            <view class="option-border">
              <view
                class="btn"
                @click.stop="handleToDetail(item)"
              >编辑</view>
              <view
                class="btn"
                @click.stop="handleDelete(item)"
              >删除</view>
            </view>
          </view>
        </view>
      </view>

    </view>

    <view class="bottom-btn">
      <van-button
          color="#FF9600"
          custom-class="button-cus"
          type="primary"
          @click="handleToAddAddress"
      >新建地址</van-button>
    </view>

    <van-dialog id="van-dialog"/>
    <van-toast id="van-toast"/>

  </view>
</template>

<script>
const app = getApp()
import Dialog from 'wxcomponents/vant/dialog/dialog';
import Toast from 'wxcomponents/vant/toast/toast';

export default {
  data() {
    return {
      source: '', // 跳转来源
      type: '', // 操作类型
      addressList: []
    };
  },
  methods: {
    handleToAddAddress() {
      let str = app.getQueryStringByObject({
        source: 'addressManagementPage',
        type: 'add',
      })

      uni.navigateTo({
        url: '/pages/myFeature/addressManagement/editAddress' + str
      })
    },
    handleToDetail(item) {
      const {
        id,
        name,
        mobile,
        province,
        city,
        district,
        name_address,
        door_number,
        location
      } = item

      let str = app.getQueryStringByObject({
        id,
        name,
        mobile,
        province,
        city,
        district,
        name_address,
        door_number,
        location,
        source: 'addressManagementPage',
        type: 'edit',
      })

      uni.navigateTo({
        url: '/pages/myFeature/addressManagement/editAddress' + str
      })
    },
    handleDelete(item) {
      Dialog.confirm({
        title: '提示',
        message: '确认删除吗？',
      }).then(() => {
        // on confirm
        app.request({
          id: item.id
        }, '/api/logistics/address/add_del').then((res) => {
          console.log(res)
          const {
            code,
            data,
            msg
          } = res

          if (code === 1) {
            Toast('删除成功')
            this.handleGetAddressList()
          } else {
            Toast(msg)
          }
        })
      }).catch(() => {
        // on cancel
      });
    },
    handleGetAddressList() {
      app.request({}, '/api/logistics/address/add_list').then((res) => {
        console.log(res)
        const {
          code,
          data,
          msg
        } = res

        if (code === 1) {
          console.log(data);
          this.addressList = data
        } else {
          Toast(msg)
        }
      })
    },
    handleSelectAddress(item) {
      const {
        source,
        type
      } = this
      if (source === 'sendPage') {
        const eventChannel = this.getOpenerEventChannel()

        if (type === 'send') {
          console.log(123123);
          console.log(item);
          eventChannel.emit('editSendInfo', {
            ...item
          })
        } else if (type === 'receiving') {
          eventChannel.emit('editReceivingInfo', {
            ...item
          })
        }

        uni.navigateBack()
      }
    }
  },
  onShow() {
    this.handleGetAddressList()
  },
  onLoad(res) {
    const {
      source,
      type
    } = res
    console.log(res);
    this.source = source
    this.type = type
  },
}
</script>

<style lang="scss">
.address-management-page {
  position: relative;
  min-height: 100vh;
  background-color: #F2F2F2;
  padding-bottom: 120rpx;
  box-sizing: border-box;

  .address-list-wrap {
    .address-item {
      width: 100%;
      background-color: #fff;
      padding: 26rpx 22rpx 0;
      box-sizing: border-box;
      margin-bottom: 18rpx;

      .person-wrap {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        margin-bottom: 28rpx;

        .name {
          margin-right: 20rpx;
        }
      }

      .address-wrap {
        padding-bottom: 22rpx;
        font-size: 20rpx;
        color: #999;
      }

      .option-wrap {
        width: 100%;
        padding: 0 22rpx;
        border-top: 1rpx solid #F0F1F6;
        box-sizing: border-box;

        .option-border {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          width: 100%;
          height: 64rpx;

          .btn {
            font-size: 26rpx;
            color: #FF9600;
            margin-left: 32rpx;
          }
        }
      }
    }
  }


  .bottom-btn {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    .button-cus {
      width: 100%;
    }
  }
}
</style>
